<template>
    <div class="swiper-container" ref="mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id">
                <img :src="carousel.imgUrl" />
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>
<script>
    import Swiper from 'swiper'
    export default ({
        name: 'Carousel',
        props: ['list'],
        watch: {
            //监听bannerList数据的变化:因为这条数据发生过变化----由空数组变为数组里面有四个元素
            //现在咱们通过watch监听bannerList属性的属性值的变化
            //如果执行handler方法，代表组件实例身上这个属性的属性值已经有了【数组:四个元素】
            //当前这个函数执行:只能保证bannerList数据已经有了，但是你没办法保证v-for已经执行结束了
            // v-for执行完毕，才有结构【你现在在watch当中没办法保证的】
            list: {
                immediate: true,
                handler(newValue, oldValue) {
                    // nextTick：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
                    this.$nextTick(() => {
                        //当你执行这个回调的时候:保证服务器数据回来了，v-for执行完毕了【一定轮插图的结构一定有了】
                        var mySwiper = new Swiper(this.$refs.mySwiper, {
                            // direction: 'vertical', // 垂直切换选项
                            loop: true, // 循环模式选项
                            // 如果需要分页器
                            pagination: {
                                el: ".swiper-pagination",
                                clickable: true,
                            },
                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: ".swiper-button-next",
                                prevEl: ".swiper-button-prev",
                            },
                        });
                    })
                },
            },
        },
    })
</script>
<style scoped>
</style>